<!-- pages/components/image/image.vue -->
<template>
  <view>石央平</view>
  <view>2531010120135</view>
  <view class="wrapper">
    <view class="img-box">
      <image :src="img" mode="aspectFit"></image>
    </view>
    <!-- 这种模式盒子一般不设固定高度 -->
    <image src="/static/00001.png" mode="widthFix" style="width: 100%; border: 1px solid #eee; margin-top: 15px;"></image>
  </view>
  <view class="title">地图演示 (广州塔)</view>
  <view class="box">
    <text style="font-size: 14px;">如果显示空白，请检查：<br>1. manifest.json是否配置了Key？<br>2. H5端请配置Web JS Key。<br>3. App端请配置Android/iOS Key。</text>
  </view>
  <map
    class="my-map"
    :longitude="longitude"
    :latitude="latitude"
    :markers="markers"
  >
  </map>
  <button size="mini" @click="backToCenter" style="margin-top: 10px;">回到中心点</button>
</template>

<script>
// 方案1：纯 Options API（适合不熟悉Composition API的场景，简单稳定）
export default {
  data() {
    return {
      img: "/static/780.png",
      // 1. 地图中心点坐标（注意：广州塔实际坐标是 113.324520, 23.108270，之前的坐标是广西的，会显示空白区域）
      longitude: 113.324520, // 广州塔经度（修正正确坐标）
      latitude: 23.108270,  // 广州塔纬度（修正正确坐标）
      // 2. 地图标记点
      markers: [
        {
          id: 1, // 必须唯一
          longitude: 113.324520,
          latitude: 23.108270,
          title: '广州塔', // 与坐标匹配
          iconPath: '/static/logo.png', // 确保这个图片存在，没有就换其他图片路径
          width: 30,
          height: 30
        },
		{
		  id: 2, // 必须唯一
		  longitude: 113.35,
		  latitude: 23.108270,
		  title: '石央平', // 与坐标匹配
		  iconPath: '/static/logo.png', // 确保这个图片存在，没有就换其他图片路径
		  width: 30,
		  height: 30
		}
      ]
    };
  },
  methods: {
    // 回到中心点方法（挂载到methods中，组件才能调用）
    backToCenter() {
      this.longitude = 113.324520;
      this.latitude = 23.108270;
      uni.showToast({ title: '已归位', icon: 'success' });
    }
  }
};
</script>

<style>
.wrapper {
  padding: 15px;
}
.title {
  font-size: 16px;
  font-weight: bold;
  padding: 10px 0;
  margin-top: 10px;
}
/* 给一个固定的方盒子 */
.img-box {
  width: 200px;
  height: 120px;
  border: 2px solid #f0ad4e;
  background-color: #f4f4f4;
}
.img-box image {
  width: 100%;
  height: 100%;
}
.my-map {
  width: 100%;
  height: 300px;
  /* 新增：确保地图容器不被遮挡，且有边框便于观察 */
  border: 1px solid #eee;
  border-radius: 8px;
  margin-top: 10px;
}
</style>